<template>
    <div>
        <div class="recommend-title">热销推荐</div>
        <ul>
            <router-link tag='li' :to ="'/detail/'+item.id"
            class="item border-bottom" v-for= 'item of list' :key='item.id'>
                <img class='item-img' :src="item.imgUrl">
                <div class="item-info">
                    <p class="item-title">{{item.title}}</p>
                    <p class="item-desc">{{item.desc}}</p>
                    <button class="item-button">查看详情</button>
                </div>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
    name:'Home-Recommend',
    props:{
        list:Array
    }
}
</script>
<style lang ='stylus' scoped>
 .recommend-title
  margin-top :.2rem
  line-height :.8rem
  background :#eee
  text-indent :.2rem
 .item
  overflow: hidden
  display :flex
  height :1.9rem
  .item-img
   width :1.7rem
   height :1.7rem
   padding :.1rem
  .item-info
   flex :1
   padding :.1rem
   .item-title
    line-height :.54rem
    font-size :.32rem
   .item-desc
    font-size :.28rem
    line-height :.6rem
    color :#ccc
    overflow: hidden
    white-space: nowrap
    text-overflow:ellipsis
   .item-button
    /* line-height :.44rem */
    background :#ff9300
    padding :.1rem
    border-radius :.06rem
    color :#fff
    font-size :.24rem
</style>


